import { type CSSProperties, type DeepReadonly, type InjectionKey, type UnwrapNestedRefs, reactive, readonly } from 'vue';
import type { $AllColorStr, $SizeUnitArr4Str, $SizeUnitStr } from '../types/interface';
import { isObject } from '../utils/verify';

/** ID 的类型（也是 Provide/Inject中装的值的类型） */
export type FormID = `__MXP-FRPM-${string}__`;

export type MxpFormMessageInfo = Record<number | string, number | string>;

export type ValidateField = (prop: number | string, type: 'all' | 'blur' | 'change') => Promise<boolean>;

export type MxpFormProps = {
  /** 错误提示方式 */
  itemErrorMode?: 'border' | 'label' | 'message' | 'none';
  /** 错误提示文本的对齐方式 */
  itemErrorAlign?: 'center' | 'left' | 'right';
  /** 内边距 */
  itemPadding?: $SizeUnitArr4Str;
  /** 底部边框颜色 */
  itemBorderColor?: $AllColorStr | boolean;
  /** label的位置，left-左边，top-上边 */
  itemLabelPosition?: 'left' | 'top';
  /** label的宽度 */
  itemLabelWidth?: $SizeUnitStr;
  /** label对齐方式 */
  itemLabelAlign?: 'center' | 'left' | 'right';
  /** content对齐方式 默认为: stretch 如果不为 stretch 里面内容无法铺满整个容器宽度 */
  itemContentAlign?: 'center' | 'left' | 'right' | 'stretch';
  /** 最小高度 (注意最小高度不包含上下 6px margin的高度，且最小高度和margin都是在是在subjectView中设置的) */
  itemMinHeight?: $SizeUnitStr;
  /** 自定义lable的样式 */
  itemLabelTextStyle?: CSSProperties;
  /** 自定义lable的样式 */
  itemLabelViewStyle?: CSSProperties;
  /** 主体的样式 */
  itemSubjectViewStyle?: CSSProperties;
  /** 主体的样式 */
  itemContentViewStyle?: CSSProperties;
  /** 主体的样式 */
  itemErrorTextStyle?: CSSProperties;
  /** 底部边框样式 */
  itemLineStyle?: CSSProperties;
};

export type MxpFormConfig = {
  /** mxp-form 的 props */
  formProps?: MxpFormProps;
  /** message信息 */
  messageInfo?: MxpFormMessageInfo;
  /** 验证某个子项方法 */
  validateField?: ValidateField;
};

/** 存储变量（内部使用） */
const mxpFormConfigs = reactive<Record<string, MxpFormConfig>>({});

/** Provide/Inject的 key */
export const formInjectKey: InjectionKey<FormID> = Symbol('__mxp-form-config-id__');
/** Provide/Inject的 key */
export const formItemPropInjectKey: InjectionKey<number | string> = Symbol('__mxp-form-item-prop-id__');
/** 自定义的状态管理对象 */
export function mxpFormStore() {
  return {
    state: readonly(mxpFormConfigs) as DeepReadonly<UnwrapNestedRefs<Record<string, MxpFormConfig>>>,
    actions: {
      /** 设置 mxp-form 的 props */
      setFormProps(id: FormID, formProps: MxpFormProps) {
        if (isObject(mxpFormConfigs[id])) {
          mxpFormConfigs[id].formProps = formProps;
        } else {
          mxpFormConfigs[id] = { formProps };
        }
      },
      /** 子项信息 */
      setFormMessageInfo(id: FormID, prop: number | string, message: number | string) {
        if (!isObject(mxpFormConfigs[id])) {
          mxpFormConfigs[id] = {};
        }
        if (!isObject(mxpFormConfigs[id].messageInfo)) {
          mxpFormConfigs[id]!.messageInfo = {};
        }
        mxpFormConfigs[id]!.messageInfo![prop] = message;
      },

      /** 验证某个子项方法 */
      setValidateField(id: FormID, validateField: ValidateField) {
        if (isObject(mxpFormConfigs[id])) {
          mxpFormConfigs[id].validateField = validateField;
        } else {
          mxpFormConfigs[id] = { validateField };
        }
      },
      /** 通过 ID 删除 */
      delItemByID(id: FormID) {
        if (mxpFormConfigs[id]) {
          delete mxpFormConfigs[id];
        }
      },

      /** 通过 ID 删除 */
      delFormMessageInfoByID(id: FormID, prop: number | string) {
        if (mxpFormConfigs[id]?.messageInfo?.[prop]) {
          delete mxpFormConfigs[id].messageInfo[prop];
        }
      },
    },
  };
}

export default mxpFormStore;
